<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>d3scale</title>
</head>
<body>
  
</body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
  // d3比例尺 

  // 线性，这种比例尺没有对输入和输出进行限制
  let scale = d3.scaleLinear()
    .domain([1, 5])
    .range([1, 100])
  // console.log(scale(1)) // 1
  // console.log(scale(4)) // 75.25
  // console.log(scale(-1))
  // console.log(scale(5)) // 100
  // console.log(scale(20))

  // 线性，限制输入输出
  scale = d3.scaleBand()
    .domain([1,2,3,4])
    .range([1, 100])
  //   console.log(scale(1)) // 1
  // console.log(scale(4)) // 75.25
  // console.log(scale(-1)) // undefined
  // console.log(scale(5)) // undefined

  // 序数，如果输入超出了domain的个数，则会循环进行输出
  scale = d3.scaleOrdinal()
    .domain(['a','b','c'])
    .range([1,2,3,4])
    // console.log(scale('a')) // 1
    // console.log(scale('b')) // 2
    // console.log(scale('c')) // 3
    // console.log(scale('d')) // 4
    // console.log(scale('dfsd')) // 1

  // 序数，输入是连续的但输出是序数
  scale = d3.scaleQuantize().domain([0,10])
    .range(['s', 'm', 'l'])
  console.log(scale(1))
  console.log(scale(4.4))
  console.log(scale(8))
  
</script>
</html>